<template>
  <!-- 油罐基本信息 -->
  <div v-if="isLoaded" class="dialog-wrap">
    <h1 class="oil-tit-font">油罐基本信息</h1>
    <div class="oil-wrap-draw">
      <div class="dis-cen oil-chart-wrap">
        <div class="wave-progress">
          <div class="inner">
            <div class="water" :style="{'top':useRatio+'%'}" />
            <div class="tips">{{ 100-useRatio }}%</div>
          </div>
        </div>
      </div>
      <div class="oil-info-font">
        <section class="dis-spa oil-column">
          <p>
            <span>油罐编号:</span>
            <span>{{ oilInfo.deviceNumber }}</span>
          </p>
          <p>
            <span>油罐名称:</span>
            <span>{{ oilInfo.deviceName }}</span>
          </p>
        </section>
        <section>
          <p>
            <span>规格型号:</span>
            <span>{{ oilInfo.specificationType }}</span>
          </p>
        </section>
        <section class="dis-spa oil-column">
          <p>
            <span>额定容量:</span>
            <span>{{ oilInfo.oilTank.ratedCapacity }}</span>
          </p>
          <p>
            <span>现有容量:</span>
            <span>{{ oilInfo.oilTank.existingCapacity }}</span>
          </p>
        </section>
        <section class="dis-spa oil-column">
          <p>
            <span>剩余空间:</span>
            <span>{{ oilInfo.oilTank.residualCapacity }}</span>
          </p>
          <p>
            <span>公称容积:</span>
            <span>暂无数据字段</span>
          </p>
        </section>
        <section class="dis-spa oil-column">
          <p>
            <span>安全容量:</span>
            <span>暂无数据字段</span>
          </p>
          <p>
            <span>液位高度:</span>
            <span>{{ oilInfo.oilTank.liquidLevelHeight }}</span>
          </p>
        </section>
        <section class="dis-spa oil-column">
          <p>
            <span>水位高度:</span>
            <span>{{ oilInfo.oilTank.waterLevel }}</span>
          </p>
          <p>
            <span>油品重量:</span>
            <span>{{ oilInfo.oilTank.oilWeight }}</span>
          </p>
        </section>
        <section class="dis-spa oil-column">
          <p>
            <span>密度:</span>
            <span>{{ oilInfo.oilTank.density }}</span>
          </p>
          <p>
            <span>技术状态:</span>
            <span>{{ oilInfo.technicalStatus }}</span>
          </p>
        </section>
        <section class="dis-spa oil-column">
          <p>
            <span>所属单位:</span>
            <span>{{ oilInfo.subordinateUnit }}</span>
          </p>
          <p>
            <span>生产厂家:</span>
            <span>{{ oilInfo.manufacturer }}</span>
          </p>
        </section>
        <section>
          <p>
            <span>生产日期:</span>
            <span>{{ oilInfo.manufactureDate }}</span>
          </p>
        </section>
        <section>
          <p>
            <span>备注:</span>
            <span>{{ oilInfo.remark }}</span>
          </p>
        </section>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'OilTankInfo',
  // eslint-disable-next-line vue/require-prop-types
  props: ['componentdata'],
  data() {
    return {
      isLoaded: false,
      // 使用百分比
      useRatio: 0,
      oilInfo: {
        // areaId: null,
        // coordinates: '',
        // deviceName: '油罐1',
        // deviceNumber: 'DRX-1-1',
        // deviceType: 1,
        // extData: null,
        // geometry: 'Point',
        // id: 2,
        // latitude: 29.548801,
        // longitude: 106.491589,
        // manufactureDate: '2020-03-13',
        // manufacturer: 'RXC+11',
        // modelId: null,
        // modelName: null,
        // oilTank: {
        //   density: 895,
        //   deviceId: 2,
        //   deviceNo: 'DRX-1-1',
        //   existingCapacity: 2000,
        //   liquidLevelHeight: 0,
        //   oilType: 11,
        //   oilWeight: 0,
        //   ratedCapacity: 10000,
        //   residualCapacity: 0,
        //   updateDate: '2020-03-13 11:51:31',
        //   waterLevel: 10
        // },
        // position: '经纬大道001O1',
        // remark: '油罐1',
        // specificationType: 'RXT-AJ-1',
        // subordinateUnit: '九龙坡油库',
        // technicalStatus: '新平'
      }
    }
  },
  created() {
    this.oilInfo = this.componentdata
    this.useRatio =
      (
        this.oilInfo.oilTank.residualCapacity /
        this.oilInfo.oilTank.ratedCapacity
      ).toFixed(2) * 100
    this.isLoaded = true
  },
  methods: {}
}
</script>
<style lang="scss" scoped>
@import "@/styles/com.scss";
@import "@/styles/variables.scss";
.oil-chart-wrap {
  margin-bottom: 20px;
  @-webkit-keyframes spin {
    from {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    to {
      -webkit-transform: rotate(360deg);
      transform: rotate(360deg);
    }
  }
  @keyframes spin {
    from {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    to {
      -webkit-transform: rotate(360deg);
      transform: rotate(360deg);
    }
  }
  .wave-progress {
    width: 180px;
    height: 180px;
    border: 8px solid #1ba3ab54;
    border-radius: 50%;
    box-shadow: 0 0 10px #2f6d6f91;
    background-color: #e23e329e;
    box-sizing: border-box;
    position: relative;
  }
  .wave-progress .inner {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
    border: 6px solid #bd665f;
    box-sizing: border-box;
    z-index: 10;
  }
  .wave-progress .inner .water {
    position: absolute;
    width: 200%;
    height: 200%;
    left: -50%;
    border-radius: 40%;
    background: rgba(244, 67, 54, 0.4);
    -webkit-animation: spin 10s linear infinite;
    animation: spin 10s linear infinite;
  }
  .tips {
    color: #fd6b65;
    font-size: 28px;
    line-height: 184px;
    text-align: center;
  }
}

</style>
